<template>
  <div>
    <h2>侦听器</h2>
    <input type="text" v-model.lazy="uname" />
    <span>{{ msg }}</span>
  </div>
</template>

<script>
// 导入axios
import axios from 'axios'

export default {
  data () {
    return {
      uname: '',
      msg: ''
    }
  },
  // 侦听器，写到和data平级的 watch 中
  watch: {
    // ---------------------- 1. 函数写法 ---------------------------
    // 侦听的数据项名 (新的值, 可选的原来的值) {}
    // uname (newVal, oldVal) {
    //   console.log(newVal, oldVal)
    // }

    // ---------------------- 2. 对象写法 ---------------------------
    // 侦听的数据项名: {
    //   handler (新的值, 可选的原来的值) {

    //   },
    //   immediate: true,
    //   deep: true
    // }
    uname: {
      async handler (newVal) {
        if (newVal === '') {
          return (this.msg = '')
        }
        // console.log(newVal)
        // 使用axios发送请求，前面固定加一个 await，外层函数加一个 async，即可得到响应结果
        const result = await axios.get(
          'http://www.itcbc.com:3006/api/finduser/' + newVal
        )
        // console.log(result)
        this.msg = result.data.message
      }
    }
  }
}
</script>
